<template>
  <div class="UserWorkDialog">
    <el-dialog
      :close-on-click-modal="false"
      title="人员详情"
      :visible="Boolean(dialog)"
      width="630px"
      :before-close="closeFn"
    >
      <span>
        <div class="info">
          <el-row>
            <el-col :span="8">人员名称: {{ userInfo.userName }}</el-col>
            <el-col :span="8">角色: {{ userInfo.roleName }}</el-col>
            <el-col :span="8">联系电话: {{ userInfo.mobile }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">负责区域: {{ userInfo.regionName }}</el-col>
          </el-row>
        </div>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
            <el-table-column
              prop="date"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="total"
              label="总工单数"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="cancelCount"
              label="拒绝工单"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="workCount"
              align="center"
              label="完成工单"
            >
            </el-table-column>
            <el-table-column
              prop="progressTotal"
              align="center"
              label="进行中工单"
            >
            </el-table-column>
          </el-table>
      </span>
    </el-dialog>
    <!-- 弹出框结束 -->
  </div>
</template>

<script>
import {
  getWeekToday,
  getStartDay,
  getEndDay,
  yearStar,
  yearEnd
} from '@/utils/tool'
import { getUserInos, getUserWork } from '@/api/UserAPIs'
export default {
  props: {
    dialog: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      // 成员信息
      userInfo: {},
      // 列表信息
      tableData: [{
        date: '本周',
        total: 0,
        cancelCount: 0,
        workCount: 0,
        progressTotal: 0
      }, {
        date: '本月',
        total: 0,
        cancelCount: 0,
        workCount: 0,
        progressTotal: 0
      }, {
        date: '本年',
        total: 0,
        cancelCount: 0,
        workCount: 0,
        progressTotal: 0
      }]
    }
  },
  async created () {
    console.log(getWeekToday())
    console.log(getStartDay())
    console.log(getEndDay())
    console.log(yearStar())
    console.log(yearEnd())
  },
  methods: {
    async closeFn () {
      // 重置状态
      this.userInfo = {}
      this.$emit('update:dialog', 0)
    },
    async getUserInfo () {
      try {
        const { data } = await getUserInos(this.dialog)
        this.userInfo = data
      } catch (e) {
        console.log(e)
        this.closeFn()
      }
    },
    // 拉取工作资料
    async getInfo (id) {
      const { data: weekToday } = await getUserWork({
        userId: id,
        start: getWeekToday().start + ' 00:00:00',
        end: getWeekToday().end + ' 23:59:59'
      })
      this.tableData[0].total = weekToday.total
      this.tableData[0].cancelCount = weekToday.cancelCount
      this.tableData[0].workCount = weekToday.workCount
      this.tableData[0].progressTotal = weekToday.progressTotal
      const { data: Month } = await getUserWork({
        userId: id,
        start: getStartDay(),
        end: getEndDay()
      })
      this.tableData[1].total = Month.total
      this.tableData[1].cancelCount = Month.cancelCount
      this.tableData[1].workCount = Month.workCount
      this.tableData[1].progressTotal = Month.progressTotal
      const { data: Year } = await getUserWork({
        userId: id,
        start: yearStar(),
        end: yearEnd()
      })
      this.tableData[2].total = Year.total
      this.tableData[2].cancelCount = Year.cancelCount
      this.tableData[2].workCount = Year.workCount
      this.tableData[2].progressTotal = Year.progressTotal
    }
  },
  watch: {
    dialog: {
      handler (newVal) {
        console.log(newVal)
        if (newVal) {
          this.getUserInfo(newVal)
          this.getInfo(newVal)
        }
      },
      deep: true // 深入監聽
    }
  }
}
</script>

<style lang="scss" scoped>
.UserWorkDialog {
  ::v-deep .el-dialog__body {
    padding: 20px 20px 30px;
    color: #666;
    .info {
      height: 86px;
      padding: 0 19px;
      background: #f3f6fb;
      .el-row {
        padding-top: 19px;
      }
    }
  }
  .el-table {
    margin-top: 26px;
  }
}
</style>
